import {messages} from "share/common";
import React from 'react'
import { connect } from 'react-redux'
import menuRoute from "routes/menuRoute";
import thirdConsumptionService from 'containers/third-consumption/third-consumption.service'
import 'styles/third-consumption/third-consumption.scss'
import BusinessTravelCard from '../small-component/business-travel-card';

class AuthorizeConsumption extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      list: []
    }
  }

  componentWillMount(){
    const { submitResult } = this.props;
    thirdConsumptionService.getOrderAuthor().then(res => {
      submitResult(res.data.length > 0);
      let listData = res.data.map(item => {
        item.vendorIco = item.appIcon;
        item.vendorName = item.appName;
        return item;
      })
      this.setState({ list: listData})
    })
  }

  onClickItem = (item) => {
    console.log(item);
    this.context.router.push(menuRoute.getRouteItem('authorize-consumption-view').url)
  }

  render(){
    const { list } = this.state;
    return (
      <div className="third-consumption">
        {list.length > 0 && <h3 className='third-title'>{messages('supplier-1.key21')/*预订授权*/}</h3>}
        {list.map((ven, index) => (
          <BusinessTravelCard onClickItem={this.onClickItem} businessItem={ven} key={`authorItem${index}`}/>
        ))}
      </div>
    )
  }

}

function mapStateToProps(state) {
  return {
    user: state.login.user,
    company: state.login.company
  }
}

AuthorizeConsumption.contextTypes = {
  router: React.PropTypes.object
};

export default connect(mapStateToProps)(AuthorizeConsumption);
